import { Avatar } from "../../../components/Avatar";
import { useEffect, useState } from "react";
import { Input, Button, Modal, Form, message, Skeleton } from "antd";
import { getFriends, addFriend, addFriendDto } from "@/apis/friends";
import { IUser } from "@/store/user";

export function Friends() {
  const [form] = Form.useForm();

  const [activeRoomId, setActiveRoomId] = useState<number | null>(1);
  const [inputText, setInputText] = useState<string>("");
  const [friends, setFriends] = useState<IUser[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  const searchRoom = async (options: { name: string }) => {
    setIsLoading(true);
    const [success, friends] = await getFriends(options);
    if (success) {
      setFriends(friends);
    }
    setIsLoading(false);
  };

  useEffect(() => {
    searchRoom({
      name: inputText,
    });
  }, [inputText]);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const handleAddFriend = async (values: addFriendDto) => {
    const [success] = await addFriend(values);
    if (success) {
      // 添加好友成功
      message.success("好友请求已发送！");
      setIsModalOpen(false);
    }
  };

  return (
    <div className="flex p-4 w-full">
      <div className="flex flex-col w-[280px]">
        <h3 className="h-[60px] text-xl font-bold text-white">聊天室</h3>
        <div className="flex justify-between items-center gap-2">
          <Input
            size="large"
            placeholder="搜索好友"
            onChange={(e) => setInputText(e.target.value)}
          />
          <Button
            size="large"
            type="primary"
            className="text-xl"
            onClick={() => setIsModalOpen(true)}
          >
            <span className="iconfont icon-tianjia !text-[20px]"></span>
          </Button>
          <Modal
            title="添加好友"
            open={isModalOpen}
            onOk={handleOk}
            onCancel={handleCancel}
            width={600}
            height={400}
            footer={null}
          >
            <div className="flex py-4 h-[320px]">
              <Form
                form={form}
                onFinish={handleAddFriend}
                labelCol={{ span: 7 }}
                wrapperCol={{ span: 24 }}
              >
                <Form.Item
                  name="username"
                  label="用户名"
                  rules={[{ required: true, message: "请输入好友昵称" }]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  name="reason"
                  label="添加理由"
                  rules={[{ required: true, message: "请输入添加理由" }]}
                >
                  <Input />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" htmlType="submit">
                    提交
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </Modal>
        </div>
        <div className="flex-1 mt-8 overflow-y-hidden scrollbar-custom hover:overflow-y-auto">
          <ul>
            {isLoading
              ? // Skeleton 占位符效果
                Array.from({ length: 3 }).map((_, index) => (
                  <Skeleton key={index} active avatar />
                ))
              : // 数据加载完成后渲染真实数据
                friends.map((item, index) => {
                  return (
                    <li
                      key={index}
                      className={`
                          w-[95%] flex items-center p-3 rounded-lg mb-4 bg-slate-500/10 text-white gap-2  cursor-pointer
                          ${
                            activeRoomId === item.id
                              ? "!bg-[#1d90f5] transition duration-300 shadow-[3px_2px_10px_0px_rgb(0,136,255)]"
                              : "hover:bg-slate-500/20"
                          }`}
                      onClick={() => setActiveRoomId(item.id)}
                    >
                      <Avatar name={item.nickName} src={item.avatar} />
                    </li>
                  );
                })}
          </ul>
        </div>
      </div>
    </div>
  );
}
